﻿<!DOCTYPE html>
<HTML>
<HEAD>
	<META charset="utf-8">
	<!--<META NAME="GENERATOR" Content="Microsoft Visual Studio">-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!--<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">-->
	<meta name="description" content="Web Control for Decoder">
	<meta name="author"	content="Cogent">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-Control" content="no-cache">
	<meta http-equiv="Expires" content="0">
	<TITLE>KVM</TITLE>
	<!--<LINK href="../style1.css" rel="stylesheet"	type="text/css">-->
	<script	type="text/javascript">
		document.write("<LINK href='style1.css?randomid=" +	Math.random() +	"' rel='stylesheet'	type='text/css'>");
	</script>

	<LINK rel="icon" href="favicon.ico"	/>
	<LINK href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
	<LINK href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
	<LINK href="jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css">
	<script	src="jQueryAssets/jquery-1.11.1.min.js"></script>
	<script	src="jQueryAssets/jquery.ui-1.10.4.tabs.min.js"></script>
	<!-- Following jquery.reveal.js	and	reveal.css are prepared	for	popup windows -->
	<script	type="text/javascript" src="jquery.reveal.js"></script>
	<link rel="stylesheet" href="reveal.css">
</HEAD>
<BODY onload="initMainFrameOnLoad();">

	<div id="header">
		<div id="container">
			<div id="logo"></div>
			<div id="Header_Spliter"></div>
			<div id="Product_name" class="product">
				<a id="title_name_id" style="float: left"></a>
				<label style="float: left">Internet	KVM</label>
			</div>
			<div id="backgroud_h"></div>
			<button	type="button" name="Logout_BTN"	class="BTN"	style="float: right" id="LogoutBtn"	onclick="Logout()">Logout</button>
            <button type="button" class="BTN" id="Account_BTN" style="float: right" data-reveal-id="AccountModal" data-animation="fade" data-closeonbackgroundclick="false">Account</button>
        </div>
	</div>

	<div id="content">
		<div id="Main_Tab">

			<!-- Login Page	-->
			<div id="login_panel" class="input_area">
				<form method="POST"	enctype="multipart/form-data" action="">
					<p>Login</p>
					<label>User	name:</label>
					<input type="text" id="username" onkeydown="keydown_log()"/>
					<label>Password:</label>
					<input type="password" id="password" onkeydown="keydown_log()"/>
					<button	type="button" name="username_password_BTN" class="BTN" style="float: right"	onclick="Login()">
						Login
					</button>
					<label style="float: left;color: #ff0000;display:none" id="LoginFail">Wrong	User name or Password, please check... </label>
				</form>
				<BR>
				<BR>
				<BR>
			</div>

			<!-- Status	Tab	-->
			<form method="POST"	enctype="multipart/form-data" action=""	id="StatusTab">
				<div id="Tab_Bar">
					<button	type="button" name="Tab_Status_BTN"	class="Tab_BTN-Selected" style="float: left" onclick="ChangeTab('StatusTab')">Status</button>
					<button	type="button" name="Tab_Configure_BTN" class="Tab_BTN" style="float: left" onclick="ChangeTab('ConfigureTab')">Configure</button>
                    <button	type="button" name="Tab_Network_BTN" class="Tab_BTN" style="float: left" onclick="ChangeTab('NetworkTab')">Network</button>
					<button	type="button" name="Tab_System_BTN"	class="Tab_BTN"	style="float: left"	onclick="ChangeTab('SystemTab')">System</button>
                </div>
				<div id="tabs-1" class="input_area">
					<div id="title_bar">
						<label>Status</label>
						<button	type="button" id="Status_Refresh_BTN" class="BTN" style="float:	right;display:none">Refresh</button>
                        <button type="button" id="Alarm_Info_Clear_BTN" class="BTN" style="float: right" onclick="ClearAlarmINfoSettings()">ClearAlarm</button>
                        <button type="button" id="Statistics_BTN" class="BTN" style="float: right">Statistics</button>
					</div>
					<div id="decoder_info" style="float: left">
						<div id="decoder_status" style="float: left;line-height: 25px">
							<fieldset>
								<legend>KVM	Status:</legend>
								<label>Total Bitrate:</label>
								<label style="float: right"	id="StatusTotalBitrate">0kbps</label>
								<br>
								
								<label>Input Source:</label>
								<label style="float: right"	id="StatusInputSource">N/A</label>
								<br>

								<label>Status:</label>
								<label style="float: right;color: #ff0000;display: none" id="EncStatusMis">Mismatch</label>
								<label style="float: right;color: #ff6a00" id="EncStatusStop">Stopped</label>
								<label style="float: right;color: #24d401;display: none" id="EncStatusRunning">Running</label>
								<br>
								<label>Temperature:</label>
								<label style="float: right">&#176F</label>
								<label style="float: right"	id="TempFValue">100</label>
								<label style="float: right">&#176C /</label>
								<label style="float: right"	id="TempCValue">45</label>
                                <br>
							</fieldset>
						</div>
						<div id="video_info" style="float: left;line-height: 25px" >
							<fieldset>
								<legend>Video Info:</legend>
								<label>Video Format:</label>
								<label style="float: right"	id="StatusVideoFormat">N/A</label>
								<br>
								<label>Chroma:</label>
								<label style="float: right"	id="StatusChrome">4:2:0</label>
								<br>
                                <label>Rate mode:</label>
								<label style="float: right"	id="StatusRateMode">Unknown</label>
							</fieldset>
						</div>
					</div>
                    <div id="audio_div" style="float:left">
                        <div id="audio_info" style="float:left;line-height: 25px">   
                            <fieldset>
                                <legend>Audio Info:</legend>
                                <label>Audio Codec Mode:</label>
                                <label style="float: right" id="StatusAudioCodec">N/A</label>
                                <br>
                                <div id="audiorate_div">
                                <label>Audio rate:</label>
                                <label style="float: right" id="StatusAudio1Bitrate">N/A</label>
                                </div>
                            </fieldset>
                        </div> 
                    </div>
                    <div id="pid_div" style="float:left">
                        <div id="pid_info" style="float:left;line-height: 25px">
                            <fieldset>
                                <legend>PID Info:</legend>
                                <label>PMT PID:</label>
                                <label style="float: right" id="StatusPMTPID">N/A</label>
                                <br>
                                <label>PCR PID:</label>
                                <label style="float: right" id="StatusPCRPID">N/A</label>
                                <br>
                                <label>Video PID:</label>
                                <label style="float: right" id="StatusVideoPID">N/A</label>
                                <br>
                                <label>Audio PID:</label>
                                <label style="float: right" id="StatusAudio1PID">N/A</label>
                            </fieldset>
                        </div>
                    </div>
					<div id="alarm_info" style="float: left">
						<fieldset>
							<legend>Alarm Info:</legend>
							<textarea readonly id="warninginfo" style="float:left" wrap="soft"></textarea>
						</fieldset>
					</div>
				</div>
			</form>

			<!-- Configure Tab -->
			<form method="POST"	enctype="multipart/form-data" action=""	id="ConfigureTab">
				<div id="Tab_Bar">
					<button	type="button" name="Tab_Status_BTN"	class="Tab_BTN"	style="float: left"	onclick="ChangeTab('StatusTab')">Status</button>
					<button	type="button" name="Tab_Configure_BTN" class="Tab_BTN-Selected"	style="float: left"	onclick="ChangeTab('ConfigureTab')">Configure</button>
                    <button	type="button" name="Tab_Network_BTN" class="Tab_BTN" style="float: left" onclick="ChangeTab('NetworkTab')">Network</button>
					<button	type="button" name="Tab_System_BTN"	class="Tab_BTN"	style="float: left"	onclick="ChangeTab('SystemTab')">System</button>
                </div>
				<div id="tabs-2" class="input_area">
				<div id="title_bar">
					<label>Configure Settings</label>
					<button	type="button" id="Configure_Apply_BTN" class="BTN" style="float: right" data-reveal-id="Apply_ConfigureModal" data-animation="fade"  data-closeonbackgroundclick="false">Apply</button>
                    
				</div>
				<div id="input_configure" style="float:	left;line-height: 15px">
					<fieldset>
						<legend>Transmission Configure:</legend>
                        <label>Transmission Source:</label>
                        <select id="Input_Source" onchange="ChangeInputSource(this.value)">
                            <option value="0" selected="selected">IP</option>
                            <option value="1">SRT</option>
                            <option value="2">RTSP</option>
                        </select>
                        
                        <div id="IP_Setting_Group">
                            <label>IP Receive Mode:</label>
                            <select id="IP_Recv_Mode" onchange="ChangeIPRecvMode(this.value)">
                                <option value="0">Unicast</option>
                                <option value="1" selected="selected">Multicast</option>
                            </select>
                            <div id="Multicast_IP_Group">
                                <label>Multicast IP:</label>
                                <label id="Multicast_IP_alert" style="color: #ff0000;display:none">Wrong Format</label>
                                <input type="text" id="Multicast_IP" value="" onchange="IPTextChange('Multicast_IP')" title="239.0.0.0 ~ 239.255.255.255" maxlength="15" onkeyup="value=value.replace(/[^\d\.]/g,'')" />
                            </div>
                            <div id="Unicast_IP_Group" style="display:none">
                                <label>Unicast IP:</label>
                                <label id="Unicast_IP_alert" style="color: #ff0000;display:none">Wrong Format</label>
                                <input type="text" id="Unicast_IP" value="" onchange="IPTextChange('Unicast_IP')" maxlength="15" onkeyup="value=value.replace(/[^\d\.]/g,'')" />
                            </div>
                            <label id="Label_udp_port">Port:</label>
                            <input type="text" id="UDP_Port" value="" maxlength="5" onkeyup="this.value=this.value.replace(/\D/g,'')" title="1025 ~ 65535" />

                        </div>
                        <div id="RTSP_Setting_Group" style="display:none">
                            <label id="RTSP_ADDR">RTSP Address:</label>
                            <input type="text" id="RTSP_Address" value="" maxlength="128" />
                        </div>
                        <div id="SRT_Setting_Group" style="display:none">
                            <label>SRT Mode:</label>
                            <select id="SRT_mode" onchange="ChangeSRTMode(this.value)">
                                <option value="0" selected="selected">Caller</option>
                                <option value="1">Listener</option>
							</select>
                            <div id="CallerSet">
                                <label>Address:</label>
                                <label id="SRT_Caller_Addr_alert" style="color:	#ff0000;display:none">Wrong	Format</label>
                                <input type="text" id="SRT_Caller_Addr" value="0.0.0.0" maxlength="15" onchange="IPTextChange('SRT_Caller_Addr')" onkeyup="value=value.replace(/[^\d\.]/g,'')"/>
     
                            </div>

                            <div id="PortSet">
                                <label id="Label_srt_port">SRT Port:</label>
                                <input type="text" id="SRT_Port" value="9000" maxlength="5" onkeyup="this.value=this.value.replace(/\D/g,'')" title="1025~65535" />
                            </div>

                            <button type="button" name="SRT_Advance_BTN" class="BTN" style="float: left; margin-left: 15px;" data-reveal-id="SRTAdvanceModal" data-animation="fade">Advance</button>
                        </div>
                        
                    </fieldset>
					</div>
                    <div id="decoder_configure" style="float: left">
                        <fieldset>
	                        <legend>KVM	Configure:</legend>
                            <div id="configure_l" style="float: left">
                                <label>Format:</label>
                                <select id="Fmt">
                                    <option value="0" selected="selected">NV12</option>
                                    <option value="1">NV16</option>
                                    <option value="2">XV20</option>
                                </select>
                                <label>GDR Mode:</label>
                                <select id="Gdrmode">
                                    <option value="0" selected="selected">True</option>
                                    <option value="1">False</option>
                                </select>
                                <div id="Gop">
                                    <label id="Label_gop">GOP:</label>
                                    <input type="text" id="gop" value="60" maxlength="2" onkeyup="this.value=this.value.replace(/\D/g,'')" title="25~60" />
                                </div>
                                <label>Mode:</label>
                                <select id="Mode">
                                    <option value="0" selected="selected">H.264</option>
                                    <option value="1">H.265</option>
                                </select>
                                <div id="Bitrate">
                                    <label id="Label_kvm_bitrate">Bitrate(kbps):</label>
                                    <input type="text" id="kvm_bitrate" value="5000" maxlength="5" onkeyup="this.value=this.value.replace(/\D/g,'')" title="128~99999" />
                                </div>
                                <div id="Framerate">
                                    <label id="Label_framerate">Video Framerate:</label>
                                    <input type="text" id="video_framerate" value="60" maxlength="2" onkeyup="this.value=this.value.replace(/\D/g,'')" title="25~60" />
                                </div>
                            </div>

                            <div id="configure_r" style="float: left">
                                <div id="Height">
                                    <label id="Label_height">Video Height:</label>
                                    <input type="text" id="video_height" value="1080" maxlength="4" onkeyup="this.value=this.value.replace(/\D/g,'')"/>
                                </div>
                                <div id="Width">
                                    <label id="Label_width">Video Width:</label>
                                    <input type="text" id="video_width" value="1920" maxlength="4" onkeyup="this.value=this.value.replace(/\D/g,'')" />
                                </div>
                                <label>Audio Switch:</label>
                                <select id="AudioSwitch">
                                    <option value="0" selected="selected">OFF</option>
                                    <option value="1">ON</option>
                                </select>
                            </div>

                        </fieldset>
                    </div>
				</div>
			</form>

			<!-- Network Tab -->
			<form method="POST"	enctype="multipart/form-data" action=""	id="NetworkTab">
				<div id="Tab_Bar">
					<button	type="button" name="Tab_Status_BTN"	class="Tab_BTN"	style="float: left"	onclick="ChangeTab('StatusTab')">Status</button>
					<button	type="button" name="Tab_Configure_BTN" class="Tab_BTN" style="float: left" onclick="ChangeTab('ConfigureTab')">Configure</button>
                    <button	type="button" name="Tab_Network_BTN" class="Tab_BTN-Selected" style="float:	left" onclick="ChangeTab('NetworkTab')">Network</button>
					<button	type="button" name="Tab_System_BTN"	class="Tab_BTN"	style="float: left"	onclick="ChangeTab('SystemTab')">System</button>
                </div>
				<div id="tabs-3" class="input_area">
					<div id="title_bar">
						<label>Network Settings</label>
						<button	type="button" id="Network_Apply_BTN" class="BTN" style="float: right" data-reveal-id="Apply_NetworkModal" data-animation="fade"  data-closeonbackgroundclick="false">Apply</button>
					</div>
					<div id="network_1"	style="float: left">
						<fieldset>
                            <legend>STREAM Port:</legend>
                            <label>Addressing:</label>
                            <select id="Addressing_config" onchange="Addressing_select_change()">
                                <option grade="1" value="0" selected="selected">Static</option>
                                <option grade="2" value="1">DHCP</option>
                            </select>
							<label>MAC Address:</label>
							<input type="text" id="Network1_MAC" value="FF:FF:FF:FF:FF:FF" disabled	/>
							<label>IP Address:</label>
							<label id="Network1_IP_alert" style="color:	#ff0000;display:none">Wrong	Format</label>
							<input type="text" id="Network1_IP"	value="127.0.0.1" onchange="IPTextChange('Network1_IP')" maxlength="15" onkeyup="value=value.replace(/[^\d\.]/g,'')"/>
							<label>Subnet Mask:</label>
							<label id="Network1_Netmask_alert" style="color: #ff0000;display:none">Wrong Format</label>
							<input type="text" id="Network1_Netmask" value="255.255.255.0" onchange="IPTextChange('Network1_Netmask')" maxlength="15" onkeyup="value=value.replace(/[^\d\.]/g,'')"/>
							<label id="Network1_Gateway_Label">Gateway:</label>
							<label id="Network1_Gateway_alert" style="color: #ff0000;display:none">Wrong Format</label>
							<input type="text" id="Network1_Gateway" value="0.0.0.0" onchange="IPTextChange('Network1_Gateway')" maxlength="15" onkeyup="value=value.replace(/[^\d\.]/g,'')"/>
                            <br>
                        </fieldset>
                    </div>
					<div id="network_2"	style="float: Left">
                        <fieldset>
                            <legend>CTRL Port:</legend>
                            <label>MAC Address:</label>
                            <input type="text" id="Network2_MAC" value="FF:FF:FF:FF:FF:FF" disabled />
                            <label>IP Address:</label>
                            <label id="Network2_IP_alert" style="color:	#ff0000;display:none">Wrong	Format</label>
                            <input type="text" id="Network2_IP" value="127.0.0.2" onchange="IPTextChange('Network2_IP')" maxlength="15" onkeyup="value=value.replace(/[^\d\.]/g,'')" />
                            <label>Subnet Mask:</label>
                            <label id="Network2_Netmask_alert" style="color: #ff0000;display:none">Wrong Format</label>
                            <input type="text" id="Network2_Netmask" value="255.255.255.0" onchange="IPTextChange('Network2_Netmask')" maxlength="15" onkeyup="value=value.replace(/[^\d\.]/g,'')" />
                        </fieldset> 
					</div>

					<div id="ping_info" style="float: left">
						<fieldset>
							<legend>Ping Info:</legend>
							<textarea readonly id="pinginfo" style="float:left" wrap="soft"></textarea>
						</fieldset>
					</div>
					
					<div id="ping_set" style="float:left">
                        <fieldset>
                            <label>IP Address:</label>
                            <label id="Ping_IP_alert" style="color:	#ff0000;display:none">Wrong	Format</label>
                            <input type="text" id="Ping_IP" value="127.0.0.1" onchange="IPTextChange('Ping_IP')" maxlength="15" onkeyup="value=value.replace(/[^\d\.]/g,'')" />
                            <button type="button" name="Ping_Start_BTN" class="Tab_BTN" style="float: left;margin-left: 30px;" onclick="startPingTest()">Start</button>
                            <button type="button" name="Ping_Stop_BTN" class="Tab_BTN" style="float: left;margin-left: 30px;" onclick="stopPingTest()">Stop</button>
                        </fieldset>
					</div>
					
				</div>
			</form>

			<!-- System	Tab	-->
			<form method="POST"	enctype="multipart/form-data" action=""	id="SystemTab">
				<div id="Tab_Bar">
					<button	type="button" name="Tab_Status_BTN"	class="Tab_BTN"	style="float: left"	onclick="ChangeTab('StatusTab')">Status</button>
					<button	type="button" name="Tab_Configure_BTN" class="Tab_BTN" style="float: left" onclick="ChangeTab('ConfigureTab')">Configure</button>
                    <button	type="button" name="Tab_Network_BTN" class="Tab_BTN" style="float: left" onclick="ChangeTab('NetworkTab')">Network</button>
					<button	type="button" name="Tab_System_BTN"	class="Tab_BTN-Selected" style="float: left" onclick="ChangeTab('SystemTab')">System</button>
                </div>
                <div id="tabs-4" class="input_area">
                    <div id="title_bar">
                        <label>System Info</label>
                        <button type="button" class="BTN" id="Load_Default_BTN" style="float: right" data-reveal-id="Apply_LoadDefaultModal" data-animation="fade"  data-closeonbackgroundclick="false">LoadDefault</button>
                        <button type="button" class="BTN" id="Update_BTN" style="float: right" data-reveal-id="UpdateModal" data-animation="fade" data-closeonbackgroundclick="false">Update</button>
                    </div>
                    <div id="system_info" style="float:	left">
                        <fieldset>
                            <legend>System Info:</legend>
                            <label>System Version:</label>
                            <input type="text" id="Version" value="1.0" disabled />
                            <label>Fpga Version:</label>
                            <input type="text" id="FpgaVersion" value="1.0" disabled />
                            <label>Serial Number:</label>
                            <input type="text" id="Serial" value="123456" disabled />
                            <br>
                            <button type="button" class="BTN" id="Date_BTN" style="float: left;margin-left: 15px;" data-reveal-id="DateModal" data-animation="fade" data-closeonbackgroundclick="false">Date</button>
                            <button type="button" class="BTN" id="Copy_Log_BTN" style="float: right" data-reveal-id="CopyLogModal" data-animation="fade" data-closeonbackgroundclick="true">DownloadLog</button>
                        </fieldset>
                    </div>
                    <div id="wifi_info" style="float:	left">
                        <fieldset>
                            <legend>WIFI configure:</legend>
                            <label id="WlanSwitch">WLAN Switch:</label>
                            <select id="Wlan_Switch">
                                <option value="0" selected="selected">OFF</option>
                                <option value="1">On</option>
                            </select>
                            <label>WLAN:</label>
                            <input type="text" id="wlan_name" value="N/A"/>
                            <label>WLAN Password:</label>
                            <input type="password" id="wlan_passwd" />
                            <button type="button" id="Wifi_Apply_BTN" class="BTN" style="float: right" data-reveal-id="Apply_WifiModal" data-animation="fade" data-closeonbackgroundclick="false">Apply</button>
                        </fieldset>
                    </div>
                </div>
			</form>

		</div>
	</div>


	<div id="SRTAdvanceModal" class="reveal-modal">
		<div id="title_bar">
			<label>SRT Advanced	Settings</label>
		</div>

		<div id="SRTAdvance" class="popup_area">
            <label id="Label_latency">Latency:</label>
            <input type="text" id="SRT_Latency" value="125" maxlength="4" title="20~8000ms" onkeyup="this.value=this.value.replace(/\D/g,'')" />
            <label>Encryption:</label>
            <select id="SRT_Encryption" onchange="ChangeSRTEncryption(this.value)">
                <option value="0" selected="selected">None</option>
                <option value="1">AES128</option>
                <option value="3">AES-256</option>
            </select>
            <label id="SRT_Passphrase_Label">Passphrase:</label>
            <input type="password" id="SRT_Passphrase" value="" maxlength="79" title="10~79 Characters" onkeyup="value=value.replace(/[\W]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" />
            <label id="Label_band_id">Bandwidth Overhead (5 ~ 100) %:</label>
            <input type="text" id="SRTOut_BandOver" value="25" maxlength="3" title="5~100" onkeyup="this.value=this.value.replace(/\D/g,'')" />
			<label id="Label_srt_ttl">Time	To Live:</label>
			<input type="text" id="SRTOut_TTL" value="64" maxlength="3" onkeyup="this.value=this.value.replace(/\D/g,'')"/>
			<label>Type	of Service:</label>
			<select	id="SRTOut_TOS">
				<option	value="0" selected="selected">0</option>
				<option	value="1">1</option>
				<option	value="2">2</option>
				<option	value="3">3</option>
				<option	value="4">4</option>
				<option	value="5">5</option>
				<option	value="6">6</option>
				<option	value="7">7</option>
			</select>
			<label>MTU(228~1500):</label>
			<input type="text" id="SRTOut_MTU" value="1496"	disabled maxlength="4" onkeyup="this.value=this.value.replace(/\D/g,'')"/>

			<a class="close-reveal-modal">×</a>
			<!--<button	type="button" class="BTN" name="SRT_ADVANCE_BTN" style="float: right" data-dissmiss="">OK</button>-->
		</div>
	</div>
    <!--account mode-->
    <div id="AccountModal" class="reveal-modal">
        <div id="title_bar">
            <label>Account Change Password</label>
        </div>
        <form method="POST" enctype="multipart/form-data" action="" class="popup_area">
            <label style="float: left;color: #ff0000;display:none" id="change_password_Fail">Wrong Password, please check... </label>
            <label style="float: left;color: #ff0000;display:none" id="change_password_repeat_Fail">Double password inconsistency, please check... </label>
            <label style="float: left;color: #ff0000;display:none" id="new_password_repeat_Fail">The new password matches the old one, please check... </label>
            <label style="float: left;color: #ff0000;display:none" id="new_password_length">Password length must be greater than 5 and short than 16! </label>
            <label style="float: left;color: #ff0000;display:none" id="new_password_special">Password contain special characters, please check...! </label>
            <br>
            <label>Current Password:</label>
            <input type="password" id="current_password" maxlength="16" value="" />
            <label>New Password:</label>
            <input type="password" id="new_password" maxlength="16" value="" />
            <label>Confirmation Password:</label>
            <input type="password" id="confirm_password" maxlength="16" value="" />
            <button type="button" name="apply_change_password_BTN" class="BTN" style="float: right;" onclick="Change_Password()">
                Apply
            </button>
        </form>

        <a class="close-reveal-modal">×</a>
    </div>
    <!--Date Time-->
    <div id="DateModal" class="reveal-modal" style="width: 400px;margin-left: -240px;">
        <div id="title_bar">
            <label>Date & Time Setting</label>
        </div>
        <form method="POST" enctype="multipart/form-data" action="" class="popup_area">
            <label style="float: left;color: #ff0000;display:none" id="change_datetime_Fail">Set date&time fail, please check... </label>
            <label style="float: left;color: #24d401;display:none" id="change_datetime_OK">Set date&time ok! </label>
            <label style="float: left;color: #ff6a00;display:none" id="change_datetime_wait">Set date&time, please wait... </label>
            <br>
            <label>Date:</label>
            <input type="date" id="date_set_id" value="2018-01-01" />
            <label>Time:</label>
            <input type="time" id="time_set_id" value="12:00:30" />
            <br>
            <button type="button" name="apply_date_time_BTN" id="apply_date_time_BTN_id" class="BTN" style="float: right;margin-right:15px" onclick="Change_DateTime()">
                Apply
            </button>
        </form>
        <a class="close-reveal-modal">×</a>
    </div>
    <!--Copy Log-->
    <div id="CopyLogModal" class="reveal-modal">
        <div id="title_bar">
            <label>Copy Log</label>
        </div>
        <form method="POST" enctype="multipart/form-data" action="" class="popup_area">
            <label style="float: left;color: #ff6a00;display:none" id="copy_log_wait">Copying log to local, please wait... </label>
            <label style="float: left;color: #ff0000;display:none" id="copy_log_Fail">Copy log to local fail, please check! </label>
            <label style="float: left;color: #24d401;display:none" id="copy_log_ok">Copy log to local success! </label>
        </form>
        <a class="close-reveal-modal">×</a>
    </div>
    <!--update mode  -->
    <div id="UpdateModal" class="reveal-modal">
        <div id="title_bar">
            <label>Firmware Update</label>
        </div>
        <form method="post" id="UpdateFile" class="popup_area" ENCTYPE="multipart/form-data" target="rfFrame">
            <label style="float: left;color: #ff6a00;display:none" id="update_wait">Firmware update, please wait... </label>

            <input type="text" name="Update_File_Path" id="updateFilePath" value="Press browse to choose the update file..." />
            <input type="file" name="Update_File_Hide" id="updateSelectHide" accept="application/gzip" style="display:none" onChange="ChangeUpdateFile()" />
            <button type="submit" class="BTN" name="UPDATE_BTN" id="UPDATE_BTN_ID" style="float: right" onclick="form_update(this.form)">Update</button>
            <button type="button" class="BTN" name="UPDATE_BROWSE_BTN" id="UPDATE_BROWSE_BTN_ID" style="float: right" onclick="ChooseUpdateFile()">Browse</button>
        </form>
        <iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>
        <a class="close-reveal-modal">×</a>
    </div>
    <!--load default-->
    <div id="Apply_LoadDefaultModal" class="reveal-modal">
        <div id="title_bar">
            <label>Load Default Configuration</label>
        </div>
        <form method="POST" enctype="multipart/form-data" action="" class="popup_area">
            <label style="float: left;color: #ff6a00;display:none" id="loaddefault_set_label">Load default configuration, please wait... </label>
        </form>
        <br>
        <br>
        <div id="Apply_LoadDefault_BTN_Group">
            <button type="button" class="BTN" id="Apply_LoadDefault_Cancel_BTN" style="float: right" data-dissmiss="">Cancel</button>
            <button type="button" class="BTN" id="Apply_LoadDefault_Confirm_BTN" style="float: right" data-dissmiss="">Yes</button>
        </div>
        <a class="close-reveal-modal">×</a>
    </div>   
    <!--Apply_ConfigureModal-->
    <div id="Apply_ConfigureModal" class="reveal-modal">
        <div id="title_bar">
            <label>Configure Settings</label>
        </div>
        <form method="POST" enctype="multipart/form-data" action="" class="popup_area">
            <label style="float: left;color: #ff6a00;display:none" id="configure_set_label">Setting Configure parameters, please wait... </label>
        </form>
        <br>
        <br>
        <div id="Apply_Configure_BTN_Group">
			<button	type="button" class="BTN" id="Apply_Configure_Cancel_BTN" style="float: right" data-dissmiss="">Cancel</button>
			<button	type="button" class="BTN" id="Apply_Configure_Confirm_BTN" style="float: right" data-dissmiss="">Yes</button>
        </div>
        <a class="close-reveal-modal">×</a>
    </div>
    <!--Apply_NetworkModal-->
    <div id="Apply_NetworkModal" class="reveal-modal">
        <div id="title_bar">
            <label>Network Settings</label>
        </div>
        <form method="POST" enctype="multipart/form-data" action="" class="popup_area">
            <label style="float: left;color: #ff6a00;display:none" id="network_set_label">Setting Network parameters, please wait... </label>
        </form>
        <br>
        <br>
        <div id="Apply_Network_BTN_Group">
			<button	type="button" class="BTN" id="Apply_Network_Cancel_BTN" style="float: right" data-dissmiss="">Cancel</button>
			<button	type="button" class="BTN" id="Apply_Network_Confirm_BTN" style="float: right" data-dissmiss="">Yes</button>
        </div>
        <a class="close-reveal-modal">×</a>
    </div>
    <!--Apply_WifiModal-->
    <div id="Apply_WifiModal" class="reveal-modal">
        <div id="title_bar">
            <label>Wifi Settings</label>
        </div>
        <form method="POST" enctype="multipart/form-data" action="" class="popup_area">
            <label style="float: left;color: #ff6a00;display:none" id="wifi_set_label">Setting Wifi parameters, please wait... </label>
        </form>
        <br>
        <br>
        <div id="Apply_Wifi_BTN_Group">
            <button type="button" class="BTN" id="Apply_Wifi_Cancel_BTN" style="float: right" data-dissmiss="">Cancel</button>
            <button type="button" class="BTN" id="Apply_Wifi_Confirm_BTN" style="float: right" data-dissmiss="">Yes</button>
        </div>
        <a class="close-reveal-modal">×</a>
    </div>
	<script	type="text/javascript">
        document.write("<script	src='mainframe.js?randomid=" + Math.random() + "'></s" + "cript>");
		document.write("<script	src='common.js?randomid=" +	Math.random() +	"'></s"	+ "cript>");
	</script>

</BODY>
</HTML>
